<template>
    <Table border :context="self" :columns="columns7" :data="data6"></Table>
</template>
<script>

    export default {
        data () {
            return {
                self: this,
                columns7: [
                     {
                        title: '排序',
                        key: 'sort'
                    },
                    {
                        title: '一级目录',
                        key: 'dist'
                    },
                     {
                        title: '二级标题',
                        key: 'title'
                    },

                    {
                        title: '简介',
                        key: 'intro'
                    },
                    {
                        title: '详细介绍',
                       key: 'action',
                         width: 150,
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="showdetail(${index})">查看</i-button>`;
                        }
                    },
                    {
                        title: '图片',
                        key: 'action',
                         width: 150,
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="showimg(${index})">查看</i-button>`;
                        }
                    },

                    {
                        title: '价格（汽车：万元）/(房屋：元/平米)',
                        key: 'price'
                    },
                    {
                        title: '状态',
                        key: 'state'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="show(${index})">编辑</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        }
                    }
                ],
                data6: [
                    {
                        id:0,
                        sort:1,
                        dist:'',
                        title: '',
                        intro: '',
                        img: '',
                        price:0,
                        state:0,
                        imgarr:''
                    }

                ]
            }
        },
       mounted: function () {

            this.$http.get("http://www.htmlk.cn:80/infoAll").then((response) => {
                  this.$data.data6=response.data
                 
                   

                })
        },
        methods: {
             showdetail (index) {
                this.$Modal.info({
                    title: '详情',
                    content: `详情内容：${this.data6[index].detail}`
                })
            },
             showimg (index) {
                var img= this.$data.data6[index].img.split('@')
                console.log(this.$data.data6[index])
                var html=""
                for (var i = img.length - 1; i >= 0; i--) {
                    console.log(img[i])
                    html+='<img width="50%" height="100px" src="http://www.htmlk.cn/images/'+img[i]+'" alt="" />'
                }

                this.$Modal.info({
                    title: '图片信息',
                    content: html
                })
            },
            show (index) {
                var that=this
                console.log( this.$route )
                var id=that.data6[index].id
               this.$router.push({ name: 'add', params: { id: id }})

                // var html=`<form method ='post'  action='http://www.htmlk.cn/updatelist' onsubmit="return saveReport();">排序： <input type="text" name="sort" value="${this.data6[index].sort}"/><br><br>
                //             一级目录：<input type="text" name="dist" value="${this.data6[index].dist}" /><br><br>
                //             二级标题：<input type="text" name="title" value="${this.data6[index].title}"/></br><br>
                //             简介：<input type="text" name="intro" value="${this.data6[index].intro}"/></br><br>
                //             详细介绍：<textarea type="text" name="detail" />${this.data6[index].detail}</textarea></br><br>
                //             <input type="hidden" name="img" value="${this.data6[index].img}"/></br><br>

                //             价格：<input type="text"  name="price" value="${this.data6[index].price}"/></br><br>
                //             状态：<input type="text" name="state" value="${this.data6[index].state}"/></br><br>
                //             <input type="hidden" name="id" value="${this.data6[index].id}"/></br><br>
                //             <input type="submit"  value="确认修改"/><form>`

                // this.$Modal.info({

                //     title: '商品信息',
                //     content: html,
                //     onOk:function(){
                        
                //     }
                // })

            },
            remove (index) {
                var url='http://www.htmlk.cn:80/infoDel?id='+this.$data.data6[index].id
                this.$http.get(url).then((response) => {
                      console.log(response.data)
                       this.data6.splice(index, 1);
                    })
            }
        }
    }
</script>
